Skip to main content

Best Practices

Organizing Your Classes​

  • Create single-purpose classes that do one thing well
  • Use clear, descriptive names for your classes
  • Group related classes into logical categories in your stylesheet
  • Document the purpose of each class in your stylesheet

Effective Class Combinations​

  • Start with the base class that defines the main purpose of the element
  • Add modifier classes to adjust appearance or behavior
  • Keep combinations simple and meaningful
  • Test combinations to ensure they work as expected

Performance Tips​

  • Limit the number of classes per element to maintain clarity
  • Use class combinations that make semantic sense
  • Create class presets for commonly used combinations
  • Regular cleanup of unused class combinations

Common Patterns​

Content Types​

.note { /* Base styling for notes */ }
.warning { /* Warning-specific styling */ }
.tip { /* Tip-specific styling */ }

Visual Styles​

.highlighted { /* Highlight background */ }
.bordered { /* Add borders */ }
.rounded { /* Round corners */ }

Layout​

.centered { /* Center content */ }
.full-width { /* Full width container */ }
.condensed { /* Reduced spacing */ }

Example Combinations​

  • note warning - Creates a warning note
  • panel highlighted rounded - A highlighted panel with rounded corners
  • table condensed bordered - A compact table with borders